<template>
	<view class="nav-bar">
	    <view class="nav-container" :style="{background:bgcolor}">
	        <view class="status-bar" :style="{height:menuInfo.top+'px'}"></view>
	        <view class="nav-content" :style="{height:menuInfo.height+'px'}">
	            <view class="nav-left" :style="{width:menuInfo.width+'px',height:menuInfo.height+'px'}">
	                <view bindtap="__e" class="left-option" @click="goback">
	                    <image mode="aspectFit" src="/static/icons/back_white.png"></image>
	                </view>
	                <view bindtap="__e" class="left-option" @click="gohome">
	                    <image mode="aspectFit" src="/static/icons/home_white.png"></image>
	                </view>
	            </view>
	            <text class="nav-title cu-flex-center" :style="{height:menuInfo.height+'px',top:menuInfo.top+'px'}" v-if="title">{{title}}</text>
	        </view>
	    </view>
	    <view class="nav-empty" :style="{height:menuInfo.bottom+'px'}" v-if="!empty"></view>
	</view>
	
</template>

<script>
	export default {
		props: {
			bgcolor: {
			    type: String,
			    default: "#141414"
			},
			title: {
			    type: String,
			    default: ""
			},
			empty: {
			    type: Boolean,
			    default: !1
			}
		},
		data() {
			return {
				currentClassify: -1,
				classifyList: [],
				statusBarHeight: uni.getStorageSync("deviceInfo").statusBarHeightPx,
				menuInfo: uni.getMenuButtonBoundingClientRect()
			}
		},
		// computed: {
		//     bottomSafeHeight: function() {
		//         return e.getStorageSync("deviceInfo").bottomSafeAreaHeight;
		//     }
		// },
		methods: {
			goback: function() {
			    uni.navigateBack();
			},
			gohome: function() {
			    uni.reLaunch({
			        url: "/pages/tabbar/home"
			    });
			}
		}
	}
</script>

<style lang="scss">
	.nav-container {
	    backdrop-filter: blur(13px);
	    position: fixed;
	    top: 0;
	    width: 100vw;
	    z-index: 999999;
	}
	
	.nav-content {
	    width: 100vw;
	}
	
	.nav-left {
	    border-radius: 10000rpx;
	    justify-content: space-between;
	    margin-left: 15rpx;
	    padding: 20rpx;
	}
	
	.left-option,.nav-left {
	    align-items: center;
	    display: flex;
	    z-index: 999;
	}
	
	.left-option {
	    border-radius: 50%;
	    height: 50rpx;
	    justify-content: center;
	    width: 50rpx;
	}
	
	.xiexian {
	    color: hsla(0,0%,100%,.302);
	    font-size: 18px;
	    z-index: 999;
	}
	
	.left-option image {
	    height: 90%;
	    width: 90%;
	    z-index: 999;
	}
	
	.nav-title {
	    font-size: 32rpx;
	    font-weight: 700;
	    position: absolute;
	    text-align: center;
	    top: 0;
	    width: 100vw;
	    z-index: 1;
		color: #fff;
	}
</style>